import { Table, Space, Button, Tag, Drawer, Form, Input, Select, Tree, message, Popconfirm } from 'antd'
import { useState } from 'react'
import { getAdminList, addAdmin, deleteAdmin } from './../../api/admin'
import { useEffect, useCallback } from 'react'
import menus from './../../router/menus'
const Com = () => {
  const [adminList, setAdminList] = useState([])
  useEffect(() => {
    getAdminList().then(res => {
      setAdminList(res.data)
    })
  }, [])
  const columns = [
    {
      title: '序号',
      with: 50,
      render: (text, record, index) => {
        return (<span>{index + 1}</span>)
      }
    },
    {
      title: '账号',
      with: 100,
      dataIndex: 'adminname'
    },
    {
      title: '权限',
      dataIndex: 'role',
      with: 100,
      render(text) {
        return (
          <>
            {
              text === 2 ? <Tag color="green">超级管理员</Tag> : <Tag>管理员</Tag>
            }
          </>
        )
      }
    },
    {
      title: '操作',
      with: 200,
      render(text, record, index) {
        return (
          <Space>
            <Button type="ghost">编辑</Button>
            <Popconfirm
              title="确认删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm= {() => {
                deleteAdmin({
                  adminid: record.adminid
                }).then(res => {
                  message.success('删除成功')
                  getAdminList().then(res => {
                    setAdminList(res.data)
                  })
                })
              }}
              onCancel = {() => {}}
            >
              <Button type="danger">删除</Button>

            </Popconfirm>
          </Space>
        )
      }
    },
  ]
 // 固定头和列
 const [height, setHeight] = useState(0)
 useEffect(() => {
   setHeight(window.innerHeight)
 }, [])
  // const [onAddClose, setOnAddClose] = useState([])
  const [addVisible, setAddVisible] = useState(false)
  const onAddOppen = useCallback(() => {
    setAddVisible(true)
  }, [])
  const onAddClose = useCallback(() => {
    setAddVisible(false)
  }, [])

  const [adminname, setAdminname] = useState('')
  const [password, setPassword] = useState('')
  const [role, setRole] = useState(1)
  const [checkedKeys, setCheckedKeys] = useState(['0-0'])

  const onCheck = useCallback((checkedKeys) => {
    setCheckedKeys(checkedKeys)
  }, [])
  const addAdminFn = useCallback(() => {
    const data = {
      adminname,
      password,
      role,
      checkedKeys
    }
    addAdmin(data).then(res => {
      if (res.data === '10004') {
        message.error('该管理员已存在')
      } else {
        setAdminname('')
        setPassword('')
        setRole(1)
        setCheckedKeys(['0-0'])
        setAddVisible(false)
        getAdminList().then(res => {
          setAdminList(res.data)
        })
        message.success('添加管理员成功')
      }
    })
  }, [adminname, password, role, checkedKeys])
  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <Button type="primary" onClick={onAddOppen}>添加管理员</Button>
      <Table
        dataSource={adminList}
        columns={columns}
        rowKey="adminid"
        scroll={{ y: height - 330 }}
      ></Table>
      <Drawer
        width="500"
        title="添加管理员"
        placement="right"
        onClose={onAddClose}
        visible={addVisible}
      >
        <Form
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          layout="horizontal"
        >
          <Form.Item>
            <Input placeholder="管理员账户" value={adminname} onChange={e => setAdminname(e.target.value)} />
          </Form.Item>
          <Form.Item>
            <Input placeholder="密码" value={password} onChange={e => setPassword(e.target.value)} />
          </Form.Item>
          <Form.Item>
            <Select defaultValue={1} value={role} onChange={value => setRole(value)}>
              <Select.Option value={1}>管理员</Select.Option>
              <Select.Option value={2}>超级管理员</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Tree
              checkable
              onCheck={onCheck}
              treeData={menus}
              checkedKeys={checkedKeys}
            />
          </Form.Item>
          <Form.Item
            labelCol={{
              offset: 4,
              span: 4
            }}
          >
            <Button type="primary" onClick={addAdminFn}>添加管理员</Button>
          </Form.Item>
        </Form>
      </Drawer>
    </Space>
  )
}
export default Com